<template>
    <div>
        <div style="margin-bottom: 10px;">
            <el-input style="width: 200px;" v-model="id" placeholder="根据用户名查询"></el-input>
            <el-input style="width: 200px;margin: 5px;" v-model="rname"  placeholder="根据角色查询"></el-input>
            <el-button type="primary" @click="search" ><el-icon><Search /></el-icon>查询</el-button>
        </div>
        <div  style="margin-left: 0%;">
        <el-table :data="users" :style="{ width: '100%' , height:'600px',}" :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}" >
            <el-table-column prop="UTID" label="学号" width="180px" />
            <el-table-column prop="USERNAME" label="用户名" width="180px" />
            <el-table-column prop="RNAME" label="角色" />
            <el-table-column label="操作" class-name="center-label" width="200px" >
                <template #default="scope">
                <el-button type="primary" @click="openEditDialog(scope.row)" plain><el-icon><EditPen /></el-icon>编辑</el-button>
                <el-button type="danger" @click="deleterole(scope.row)" plain><el-icon><Delete /></el-icon>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

         <div>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible">
      <el-form label-position="top">
        <el-form-item label="用户名">
          <span>{{ currentUser.USERNAME }}</span>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio-group v-model="currentUser.RNAME">
            <el-radio label="老师">老师</el-radio>
            <el-radio label="学生">学生</el-radio>
            <el-radio label="管理员">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRole">保存</el-button>
      </div>
    </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="show" title="删除确认">
        <main>确定要删除该条数据吗？</main>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="show = false">取消</el-button>
                    <el-button type="primary" @click="DeleteUser()">确认</el-button>
                </span>
            </template>
        </el-dialog>
  </div>
    </div>

</template>

<script>
import {ShowRole,saveUserRole, SearchById,SearchByrname,deleterolebyid} from '@/api/index/admin'


export default {
    data(){
        return {
          show:false,
          delteIndex:'',
          users:[],
          id:'',
          rname: '',
          editDialogVisible: false, // 编辑弹窗的显示状态
          currentUser: null, // 当前选中的用户信息
        }
    },
    created(){
      this.load();
    },

    methods:{
        openEditDialog(user) {
            this.currentUser = user; // 将当前行的用户信息赋值给currentUser
            console.log(this.currentUser)
            this.editDialogVisible = true; // 打开编辑弹窗
        },
        // 保存角色修改
        saveRole() {
            saveUserRole({rolename:this.currentUser.RNAME,id:this.currentUser.UTID}).then(res => {
                console.log(res)
                console.log("保存成功");
                this.editDialogVisible = false; // 关闭编辑弹窗
            });
            },
        // 查询角色根据id
        // search(){
        //   console.log(this.id)
        //   SearchById({uid:this.id}).then(res=>{
        //     console.log(res)
        //     this.users=res.data.data;
        //   })
        // },
        search(){
            const params = {};
            if (this.id) {
            params.uid = this.id;
            SearchById(params).then(res=>{
            console.log(res)
            this.users=res.data.data;
          })
            }
            if (this.rname) {
            params.rname = this.rname;
            SearchByrname(params).then(res=>{
            console.log(res)
            this.users=res.data.data;
          })
            }},
        deleterole(index){
          this.delteIndex=index;
          this.show=true;
        },
        DeleteUser(){
          console.log(this.delteIndex)
          deleterolebyid({id:this.delteIndex.UTID}).then(res=>{
            console.log(res)
            if(res.data.code==200){
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.load();
              this.show=false;
          }
          else {
            this.$message({
                message: '删除失败',
                type: 'error'
              })
            this.show=false;
          }
        })
        },
        load(){
            ShowRole().then(res=>{
            console.log(res)
            this.users=res.data.data;
        })
        },

    }
}


</script>

<style scoped>
.center-label .cell {
  text-align: center;
}

</style>